import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, TouchableOpacity, Text, Platform} from 'react-native';

export default class extends PureComponent {
    render() {
        const {navigation, bgColor, title, titleColor} = this.props;
        return (
            <View style={[styles.container, {backgroundColor: bgColor}]}>
                <TouchableOpacity onPress={() => {
                    navigation.goBack();
                }}>
                    <Image source={require('./img/icon_back.png')} style={[styles.img, {marginRight: 35}]}/>
                </TouchableOpacity>
                <Text style={[styles.title, {color: titleColor}]} numberOfLines={1}>{title}</Text>
                <View style={styles.rightContent}>
                    <TouchableOpacity onPress={() => {
                        navigation.navigate('search');
                    }}>
                        <Image source={require('./img/icon_search.png')} style={[styles.img, {marginLeft: 2}]}/>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        ...Platform.select({
            ios: {
                height: 64,
                paddingTop: 20
            },
            android: {
                height: 44
            },
        }),
        paddingLeft: 12,
        paddingRight: 12,
        position: 'absolute',
        left: 0,
        top: 0,
        width: '100%',
        alignItems: 'center',
        zIndex: 2
    },
    img: {
        width: 25,
        height: 25
    },
    title: {
        fontSize: 16,
        fontWeight: 'bold',
        textAlign: 'center',
        flex: 1
    },
    rightContent: {
        flexDirection: 'row'
    }
});
